<!--
 * @Descripttion: 网站设计
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-10 11:17:58
 * @LastEditors: GW
 * @LastEditTime: 2022-06-21 11:57:01
-->
<template>
    <div class="website-wrapper">
        <div style="font-size:26px;padding:10px;">
            <a-button type="primary" @click="openWebSite" ghost>去设计
                <a-icon type="right" />
            </a-button>
        </div>
        <div id="websiteWrapper" class="animate__animated" :class="animit?'animate__zoomIn':'animate__zoomOut'" v-if="isShow" ref="websiteWrapper">
            <module></module>
            <div class="btn-box">
                <div class="btn-item">
                    <a-icon type="save" /> 保存
                </div>
                <div class="btn-item">
                    <a-icon type="eye" /> 预览
                </div>
                <div class="btn-item" @click="closeWebSite">
                    <a-icon type="close" /> 取消
                </div>
            </div>
            <!-- <box>
                <div slot="content">
                    niha
                </div>
            </box> -->
            <template v-for="(item, index) in moduleList">
                <component :is="item.component" :data="item"></component>
            </template>
        </div>
    </div>
</template>
<script>
import Api from "@/api/website/mySite"
import module from "./components/module";
// import box from "./components/box";
export default {
    components: {
        module,
        // box
    },
    data () {
        return {
            isShow: false,
            animit: false,
            moveDataelse: {
                x: null,
                y: null
            },
            moveWh: {
                x: null,
                y: null
            },
            htmlData: [],

            mainPosition: {},//编辑框位置信息

        }
    },
    // 自定义指令 实现可拖动
    directives: {
        drag (el, bindings) {
            el.onmousedown = function (e) {
                var disx = e.pageX - el.offsetLeft
                var disy = e.pageY - el.offsetTop
                document.onmousemove = function (e) {
                    el.style.left = e.pageX - disx + 'px'
                    el.style.top = e.pageY - disy + 'px'
                }
                document.onmouseup = function () {
                    document.onmousemove = document.onmouseup = null
                }
            }
        }
    },
    created () {


    },
    mounted () {
        let _this = this;
        let dom = document.getElementById('websiteWrapper');
        if (dom) {
            _this.mainPosition = dom.getBoundingClientRect();
            window.onresize = () => {
                //每次界面改变 都刷新父级dom属性
                _this.mainPosition = dom.getBoundingClientRect();
            }
        }

    },
    methods: {
        mouseDownHandleelse (event) {
            this.moveDataelse.x = event.pageX - this.$refs.dragBox.offsetLeft
            this.moveDataelse.y = event.pageY - this.$refs.dragBox.offsetTop
            event.currentTarget.style.cursor = 'move'
            window.onmousemove = this.mouseMoveHandleelse
        },
        mouseMoveHandleelse (event) {
            let moveLeft = event.pageX - this.moveDataelse.x;
            let moveTop = event.pageY - this.moveDataelse.y;

            this.$refs.dragBox.style.left = moveLeft + 'px'
            this.$refs.dragBox.style.top = moveTop + 'px'
            if (moveLeft <= 0) {
                //左侧不能超出
                this.$refs.dragBox.style.left = 0 + 'px'
            }
            if (moveTop <= 0) {
                //顶部不能超出
                this.$refs.dragBox.style.top = 0 + 'px'
            }
            if (moveLeft > this.mainPosition.width - this.$refs.dragBox.offsetWidth - 2) {
                //右侧不能超出
                this.$refs.dragBox.style.left = (this.mainPosition.width - this.$refs.dragBox.offsetWidth - 2) + 'px'
            }
            if (moveTop > this.mainPosition.height - this.$refs.dragBox.offsetHeight - 2) {
                //底部不能超出
                this.$refs.dragBox.style.top = (this.mainPosition.height - this.$refs.dragBox.offsetHeight - 2) + 'px'
            }
        },
        mouseUpHandleelse (event) {
            window.onmousemove = null
            event.currentTarget.style.cursor = 'move'
            console.log('鼠标松开了')
        },
        openWebSite () {
            this.animit = true;
            this.isShow = true;
        },
        closeWebSite () {
            this.animit = false;
            setTimeout(() => {
                this.isShow = false;
            }, 1000);
        }
    }
}
</script>
<style lang="scss" scoped>
    .kongtiaojifang {
        height: 200px;
        width: 400px;
        position: absolute;
        left: 550px;
        background: #1890ff;
        cursor: pointer;
        box-sizing: border-box;
        z-index: 2;
    }
    .website-wrapper {
        height: calc(100vh - 106px);
        border: 1px solid #ccc;
        margin: 10px;
        margin-top: 96px;
    }
    #websiteWrapper {
        height: 100vh;
        width: 100vw;
        position: fixed;
        top: 0px;
        left: 0px;
        background: #ffffff;

        .btn-box {
            position: fixed;
            width: 200px;
            right: 10px;
            top: 10px;
            display: flex;

            .btn-item {
                flex: 1;
                line-height: 32px;
                cursor: pointer;
                text-align: center;
            }

            .btn-item:hover {
                color: #1890ff;
            }
        }
    }

    .align-center {
        text-align: center;
    }

    .cursor {
        cursor: pointer;
    }
</style>